<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/indexcss.css">
    <script src="js/indexjs.js"></script>
    <script src="js/index_2.js"></script>
</head>
<body>
<!--/制作固定广告效果-->
<div class="guang_gao">
    <div class="guang_gao_1" style="float:left;">
        <div style="margin-top: 10px;margin-bottom: 10px">
            <small>
                choose
            </small>
        </div>
        <div class="red_Click" style="width: 25px;height: 25px; margin-top: 10px; background-color: red"></div>
        <div class="blue_Click" style="width: 25px;height: 25px; margin-top: 10px; background-color: blue"></div>
        <div class="purple_Click" style="width: 25px;height: 25px; margin-top: 10px; background-color: #ff04e2"></div>
        <div class="deeppink_Click"
             style="width: 25px;height: 25px; margin-top: 10px;margin-bottom: 20px; background-color: deeppink"></div>
    </div>
    <div class="cn" style="float: left;background-color: white;">
        <div class="" style="width: 25px;height: 25px;margin-top: 10px">
            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
        </div>
    </div>
</div>

<!--制作头部-->
<div class="col-md-12" id="toubudonghua">
    <div class="div_tou">
        <!--    背景图1-->
        <div class="div1">
            <!--        背景图2-->
            <div class="div2">
                <!--            内容-->
                <div class="container">
                    <!--                内容1-->
                    <div class="col-md-5">
                        <div class="col-md-12 left">
                            <img src="img/sad.jpg" class="hidden img_1 bianse_tu" id="animatedImage">
                            <div class="spin-animation">
                                <h1 style="margin-top: 50px" class="bianse">JHON BINEENA</h1>
                                <h2 style="margin-top: 50px">WEB DESIGNER</h2>
                                <button class="btn btn_1 color" style="margin-top: 50px">
                                    EXPLORE MYSELF
                                </button>
                            </div>
                        </div>
                    </div>
                    <!--                内容2-->
                    <div class="col-md-2" id="neirong2">
                        <div class="col-md-12">
                            <!--                        有颜色的-->
                            <div class="col-md-12">
                                <div class="div_yuan beijing_bianse">
                                    i
                                    <div class="col-md-12">
                                        <h2>ABOUT ME</h2>
                                    </div>
                                </div>
                            </div>

                            <!--                        无颜色-->
                            <div class="col-md-12">
                                <div class="div_yuan_wu">
                                    <span class="glyphicon glyphicon-briefcase san1" aria-hidden="true"></span>
                                    <div class="col-md-12">
                                        <h2>RESUME</h2>
                                    </div>
                                </div>
                            </div>

                            <!--                        有颜色的-->
                            <div class="col-md-12">
                                <div class="div_yuan beijing_bianse">
                                    i
                                    <div class="col-md-12">
                                        <h2>PORTFOLIO</h2>
                                    </div>
                                </div>
                            </div>

                            <!--                        无颜色-->
                            <div class="col-md-12">
                                <div class="div_yuan_wu2">
                                    <span class="glyphicon glyphicon-camera san2" aria-hidden="true"></span>
                                    <div class="col-md-12">
                                        <h2>HIREME</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--                内容3-->
                    <div class="col-md-5">
                        <div class="col-md-12 left">
                            <img src="img/smile.jpg" class="img_2 bianse_tu" id="img_22">
                            <div class="spin-animation">
                                <h1 style="margin-top: 50px" class="bianse">EXPERLENCE OF</h1>
                                <h2 style="margin-top: 50px">5+ YEARS</h2>
                                <button class="btn btn_1 color" style="margin-top: 50px">
                                    DOWNLOAD RESUME
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--制作头部-->

<!--制作第二张-->
<div class="col-md-12">
    <!--    背景图-->
    <div class="bottom">
        <!--        背景图2-->
        <div class="bottom_1">
            <div class="two">
                <!--上面-->
                <div class="col-md-12 top">
                    <div class="top_1">
                        <div class="col-md-12 left_2">
                            <div class="container" style="margin-top: -50px">
                                <!--            左边的内容-->
                                <div class="col-md-4 left_3">
                                    <h1>WHAT TO KNOW</h1>
                                    <h1>ABOUT ME ?</h1>
                                    <div class="color-strip" style="margin-left: 50px;margin-top: 30px"></div>
                                    <div class="col-md-12">
                                        <div class="left_4" style="margin-top: 15px">
                                            <img src="img/Social/facebook.png">
                                            <img src="img/Social/google-plus.png" style="margin-left: 10px;">
                                            <img src="img/Social/twitter.png" style="margin-left: 10px;">
                                        </div>
                                    </div>
                                </div>
                                <!--            右边的内容-->
                                <div class="col-md-8 left_5">
                                    <div class="col-md-12">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium lectus
                                            vel
                                            justo iaculis blandit. Nulla facilisi. In hac habitasse platea dictumst.
                                            Lorem
                                            ipsum
                                            dolor sit amet, consectetur adipiscing elit. Nulla pretium lectus vel justo
                                            iaculis
                                            blandit. Nulla facilisi. In hac habitasse platea dictumst. Nulla facilisi.
                                            In
                                            hac
                                            habitasse platea dictumst</p>
                                    </div>
                                    <div class="col-md-12">
                                        <p>Nulla facilisi. In hac habitasse platea dictumst. Nulla facilisi. In hac
                                            habitasse
                                            platea dictumst. Nulla pretium lectus vel justo iaculis blandit. Nulla
                                            facilisi.
                                            In
                                            hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur
                                            adipiscing
                                            elit. Nulla pretium lectus vel justo iaculis blandit. Nulla facilisi. In hac
                                            habitasse platea dictumst.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--下面-->
                <div class="col-md-12 my_bottom">
                    <!--内容-->
                    <!--                    左边-->
                    <div class="col-md-6">
                        <div class="container left_7">
                            <div class="col-md-3">
                                <canvas class="progressCanvas"></canvas>
                                <h1 style="color: deeppink;font-weight: bolder;">JQUERY</h1>
                            </div>
                            <div class="col-md-3" style="margin-left: -100px">
                                <canvas class="progressCanvas"></canvas>
                                <h1 style="color: deeppink;font-weight: bolder;">JQUERY</h1>

                            </div>
                            <div class="col-md-3" style="margin-left: -100px">
                                <canvas class="progressCanvas"></canvas>
                                <h1 style="color: deeppink;font-weight: bolder;">JQUERY</h1>
                            </div>
                            <div class="col-md-3" style="margin-left: -100px">
                                <canvas class="progressCanvas"></canvas>
                                <h1 style="color: deeppink;font-weight: bolder;">JQUERY</h1>

                            </div>
                        </div>
                    </div>
                    <!--                    右边-->
                    <div class="col-md-6">
                        <div class="" style="margin-left: 200px">
                            <h1 style="color: deeppink;font-weight: bolder;margin-top: 100px;">CHECKOUT MY</h1>
                            <h1 style="color: deeppink;font-weight: bolder;margin-top: 30px;">SKILL SET</h1>
                            <p style="color: white;font-size: 18px;">Lorem ipsum dolor sit amet, consectetur<br>adipiscing
                                elit.
                                Nulla pretium lectus vel justo<br> iaculis blandit.
                            </p>
                            <button class="btn_3">DOWNLOAD RESUME(.pdf file)</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--制作第二张-->
</div>
<!--制作第二张-->

<!--制作第三张-->
<div class="col-md-12">
    <!--    头部-->
    <div class="top">
        <div class="col-md-12">
            <div class="container">
                <div class="col-md-4" style="text-align: left">
                    <h1 style="color: deeppink;font-weight: bolder;margin-top: 10px;">DOWNLOAD</h1>
                    <h1 style="color: deeppink;font-weight: bolder;margin-top: 10px;">RESUME</h1>
                    <div class="color-strip" style="margin-top: 30px"></div>
                    <button class="btn btn-success">DOWNLOAD RESUME(.txt file)</button>
                </div>

                <div class="col-md-8">
                    <div class="col-md-2">
                        <div class="tishi text-center">
                            <div class="tishikuang">
                                <input type="text" value="PERSONAL DETAILS" class="inp1">
                                <br>
                                <!--                       箭头提示-->
                                <span class="glyphicon glyphicon-triangle-bottom sp_1" aria-hidden="true"
                                      style="margin-left: 80px;">
                        </span>
                            </div>
                            <!--                       //圆形框框-->
                            <div class="div_yuan_5">
                                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2" style="margin-left: 15px;">
                        <div class="tishi text-center">
                            <div class="tishikuang">
                                <input type="text" value="PERSONAL DETAILS" class="inp2">
                                <br>
                                <!--                       箭头提示-->
                                <span class="glyphicon glyphicon-triangle-bottom sp_2" aria-hidden="true"
                                      style="margin-left: 80px;">
                        </span>
                            </div>
                            <!--                       //圆形框框-->
                            <div class="div_yuan_6">
                                <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2" style="margin-left: 15px;">
                        <div class="tishi text-center">
                            <div class="tishikuang">
                                <input type="text" value="PERSONAL DETAILS" class="inp3">
                                <br>
                                <!--                       箭头提示-->
                                <span class="glyphicon glyphicon-triangle-bottom sp_3" aria-hidden="true"
                                      style="margin-left: 80px;">
                        </span>
                            </div>
                            <!--                       //圆形框框-->
                            <div class="div_yuan_7">
                                <span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2" style="margin-left: 15px;">
                        <div class="tishi text-center">
                            <div class="tishikuang">
                                <input type="text" value="PERSONAL DETAILS" class="inp4">
                                <br>
                                <!--                       箭头提示-->
                                <span class="glyphicon glyphicon-triangle-bottom sp_4" aria-hidden="true"
                                      style="margin-left: 80px;">
                        </span>
                            </div>
                            <!--                       //圆形框框-->
                            <div class="div_yuan_8">
                                <span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2" style="margin-left: 15px;">
                        <div class="tishi text-center">
                            <div class="tishikuang">
                                <input type="text" value="PERSONAL DETAILS" class="inp5">
                                <br>
                                <!--                       箭头提示-->
                                <span class="glyphicon glyphicon-triangle-bottom sp_5" aria-hidden="true"
                                      style="margin-left: 80px;">
                        </span>
                            </div>
                            <!--                       //圆形框框-->
                            <div class="div_yuan_9">
                                <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"
                              style="margin-left: 80px;color: red">
                        </span>
                        <hr style="width: 700px;height :1px;background-color: rebeccapurple;margin-top: -10px">
                    </div>
                    <div class="col-md-12">
                        <h1 style="color: black;">PERSONAL DETAILS</h1>
                        <h4 style="margin-top: 15px;color: deeppink;">NAME :
                            <span style="color: black">JHON BINEENA DEXONA</span>
                        </h4>

                        <h4 style="margin-top: 15px;color: deeppink;">AGE :
                            <span style="color: black">25 YEARS</span>
                        </h4>

                        <h4 style="margin-top: 15px;color: deeppink;">EXPERIENCE :
                            <span style="color: black">5 + YEARS TILL DATE</span>
                        </h4>

                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--    尾部-->
    <div class="bottom_5" style="margin-bottom: 100px;text-align: center">
        <div class="container">
            <div class="col-md-4"
                 style="width: 350px;height: 140px;background-color: rgb(217,237,247);margin-left: 30px;">
                <h3 style="color: #6fc5ee"><span style="font-weight: bolder">10 USD </span>/ HOUR</h3>
                <p style="color: #6fc5ee">Aenean faucibus luctus enim.</p>
                <button class="btn btn-primary">BUY PLAN NOW</button>
            </div>

            <div class="col-md-4"
                 style="width: 350px;height: 140px;background-color: rgb(223, 240, 216);margin-left: 30px;">
                <h3 style="color: rgb(60, 118, 61)"><span style="font-weight: bolder">200 USD </span>/ MONTH</h3>
                <p style="color: rgb(60, 118, 61)">Aenean faucibus luctus enim.</p>
                <button class="btn btn-success">BUY PLAN NOW</button>
            </div>

            <div class="col-md-4"
                 style="width: 350px;height: 140px;background-color: rgb(217,237,247);margin-left: 30px;">
                <h3 style="color: #6fc5ee"><span style="font-weight: bolder">1500 USD </span>/ YEAR</h3>
                <p style="color: #6fc5ee">Aenean faucibus luctus enim.</p>
                <button class="btn btn-primary">BUY PLAN NOW</button>
            </div>

        </div>
    </div>

    <!--    轮播图-->
    <div class="col-md-12" id="one">
        <div class="absolute inset-0 bg-black/50"></div>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner container-fluid" role="listbox">
                <div class="item active" style="margin-top: 80px">
                    <h1 style="text-align: center;color: blue" class="cl"><b>CLIENT ESTIMONIALS</b></h1>
                    <p style="text-align: center;font-size: 17px;color: white"><i>Lorem ipsum dolor sit
                        amet, consectetur adipiscing elit onec</i></p>
                    <p style="text-align: center;font-size: 17px;color: white"><i>molestie non sem vel
                        condimentum. </i></p>
                    <div class="media" style="margin-left: 800px">
                        <div class="media-left">
                            <a href="#">
                                <img src="img/user2.png" height="64" width="64" style="border-radius:100px"/></a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color: white;font-size: 16px">Lorem Dolor</h4>
                        </div>
                    </div>
                </div>
                <div class="item" style="margin-top: 80px">
                    <h1 style="text-align: center;color: blue" class="cl"><b>CLIENT ESTIMONIALS</b></h1>
                    <p style="text-align: center;font-size: 17px;color: white"><i>Aenean faucibus luctus
                        enim. Duis quis sem risu suspend</i></p>
                    <p style="text-align: center;font-size: 17px;color: white"><i>lacinia elementum
                        nunc. </i></p>
                    <div class="media" style="margin-left: 800px">
                        <div class="media-left">
                            <a href="#">
                                <img src="img/user.gif" height="64" width="64" style="border-radius: 100px"/></a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color: white;font-size: 16px">
                                Faucibus luctus</h4>
                        </div>
                    </div>
                </div>
                <div class="item" style="margin-top: 80px">
                    <h1 style="text-align: center;color: blue" class="cl"><b>CLIENT ESTIMONIALS</b></h1>
                    <p style="text-align: center ;font-size: 17px;color: white"><i>Sed ultricies, libero ut
                        adipiscing fringilla, ante elit luctus</i></p>
                    <p style="text-align: center;font-size: 17px;color: white"><i>lorem, a egestas dui
                        metus a arcu condimentum.</i></p>
                    <div class="media" style="margin-left: 800px">
                        <div class="media-left">
                            <a href="#">
                                <img src="img/user2.png" height="64" width="64" style="border-radius: 100px"/></a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading" style="color: white;font-size: 16px">Sed ultricies</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--标题和文本-->
    <div class="col-md-12" style="text-align: center;background: white;margin-top: 60px">
        <h1 class="cl" style="color: red"><b>RECENT PROJECTS</b></h1>
        <p style="font-size: 18px"><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit onec molestie non sem
            vel</i></p>
        <p style="font-size: 18px"><i>condimentum.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
    </div>
    <!--图片-->
    <div class="img img-responsive" style="text-align: center;background: white">
        <!--图片-->
        <div class="img img-responsive" style="text-align: center;background: white">
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/1.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/2.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/4.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/3.jpg" height="220" width="290"/>
            </div>
        </div>
        <div class="img img-responsive" style="text-align: center;background: white">
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/5.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/6.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/7.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/8.jpg" height="220" width="290"/>
            </div>
        </div>
        <div class="img img-responsive" style="text-align: center;background: white">
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/3.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/8.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/5.jpg" height="220" width="290"/></div>
            <div class="picture" style="display: inline-block;height: 220px; overflow: hidden;">
                <img src="img/portfolio/small/2.jpg" height="220" width="290"/>
            </div>
        </div>
    </div>
</div>
<!--留白-->
<div class="col-md-12" style="height: 100px;background: white"></div>
<!--最后部分-->
<div class="col-md-12" id="two">
    <!--    标题和文本-->
    <div class="col-md-12" style="height: 100px">
        <h1 style="text-align: center;margin-top: 80px;color: darkmagenta" class="cl"><b>HIRE ME</b></h1>
        <p style="text-align: center; margin-top: 20px;font-size: 17px;color: white"><i>Lorem ipsum dolor sit amet,
            consectetur adipiscing elit onec molestie non sem vel condimentum.</i></p>
        <p style="text-align: center; margin-top: 10px;font-size: 17px;color: white"><i>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. </i></p>
    </div>
    <div class="col-md-12">
        <div class="col-md-2"></div>
        <!--    输入框-->
        <div class="col-md-4" style="margin-top: 160px">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Your Name" aria-describedby="basic-addon1"
                       style="width: 600px; background-color: transparent;border-radius: 5px">
            </div>

            <div class="input-group">
                <input type="text" class="form-control" placeholder="Your Email" aria-describedby="basic-addon2"
                       style="width: 600px;margin-top: 20px; background-color: transparent;border-radius: 5px">

            </div>

            <div class="input-group">
                <textarea placeholder="Meaasge"
                          style="width: 600px;margin-top: 20px;height: 128px; background-color: transparent;border-radius: 5px"></textarea>
            </div>
            <div>
                <button type="button" class="btn btn-primary" style="margin-top: 10px">CONTACT ME</button>
            </div>
        </div>
        <div class="col-md-1"></div>
        <!--        右边文本-->
        <div class="col-md-3" style="margin-top: 126px;margin-left: 100px;">
            <div class="col-md-12">
                <h1 style="color: blue">MY LOCATION</h1>
            </div>
            <div class="col-md-12" style="margin-top: 20px">
                <p style="color: white">Lorem ipsum dolor sit amet, Lorem ipsum dolor</p>
                <p style="color: white">sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-md-12" style="margin-top: 20px">
                <p style="color: #8a6d3b">ADDRESS : 243/90 - NEW YORK STREET, USA</p>
            </div>
            <div class="col-md-12" style="margin-top: 20px">
                <p style="color: #00ADAD">© 2014 All Rights Reserved</p>
                <p style="color: pink">More Templates <a href="download.html">模板之家</a> - Collect from <a
                        href="three.html">网页模板</a></p>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>
</div>

</body>
</html>
